Setting the Sized Box
Description
The box-sizing property changes the element's box that the size properties apply to.
By default, the height and width are calculated and applied for the element's content box. For example, if an element's height property is set to 100px, the real height onscreen will be 100 pixels, plus the top and bottom padding, border, and margin values.
Its value coule be one of the following:
- content-box
- padding-box
- border-box
- margin-box
Example
The following code shows how you can set the size of an element.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
div {<!-- ww w . ja v a 2 s. co m-->
width: 75%;
height: 100px;
border: thin solid black;
}
img {
background: lightgray;
border: 4px solid black;
margin: 2px;
height: 50%;
}
#first {
box-sizing: border-box;
width: 50%;
}
#second {
box-sizing: content-box;
}
</style>
</head>
<body>
<div>
<img id="first" src="http://www.java2s.com/style/download.png" alt="small banana">
<img id="second" src="http://www.java2s.com/style/download.png" alt="small banana">
</div>
</body>
</html>